import React, { useEffect, useState } from 'react'
import { ApproveBlock, Header } from '@components/ApprovePre/Approve'
import { awaitWrap } from '@src/assets/js/tool'
import { getTaskRequest } from './ajax'
import { message, Skeleton, Alert } from 'antd'
import Task from './components/Task/Index'

async function initData (caseid, setTask, setLoading) {
  setLoading(true)
  const [e, d] = await awaitWrap(getTaskRequest(caseid))
  setLoading(false)
  if (e !== null) {
    return message.warning(e.message)
  }
  if (d instanceof Array && d.length > 0) {
    setTask(d[0])
  }
}

function Main ({ caseDetail }) {
  const [task, setTask] = useState(null)
  const [feedback, setFeedback] = useState([])
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    if (caseDetail) {
      initData(caseDetail.id, setTask, setLoading)
    }
  }, [caseDetail])
  useEffect(() => {
    if (task) {
      setFeedback(task.feedback || [])
    }
  }, [task])
  if (!loading && !task) {
    return (
      <Alert message='暂无仲裁员提交结案文书' type='warning' showIcon closable />
    )
  }
  return (
    <ApproveBlock>
      <Skeleton active loading={loading}>
        <Header title='仲裁员结案文书' />
        {task && <Task data={task} />}
        {feedback.map((li, i) => <Task data={li} key={i} />)}
      </Skeleton>
    </ApproveBlock>
  )
}

export default Main
